<!-- 
例子:
<pb-patient-switch-popup uniqueValue="123" :readOnly="true"></pb-patient-switch-popup>
<pb-patient-switch-popup @confirm="selectPatient" @handleAdd="handleAdd"></pb-patient-switch-popup>

onLoad() {
	this.$store.dispatch('user/getDefaultPatient').finally(()=>{
		this.user = this.$store.getters.defaultPatient;
		//...调用接口获取数据
	})
}

selectPatient(user) {
	this.user = user
	//...调用接口获取数据
}

handleAdd() {	uni.navigateTo({		url: '/user/pages/user/bindcard'	})}
-->
<template>
	<view>
		<view v-if="!hiddenView" class="pb-flex-row pb-main-between pb-cross-center content" @click="onClick">
			<view class="pb-flex-row pb-cross-center">
				<slot name="leftIcon">
					<image :src="require('./static/card.png')"></image>
				</slot>
				<text>{{showName}}</text>
			</view>
			<slot name="rightIcon">
				<image v-if="readOnly == false" :src="require('./static/switch.png')" style="flex-shrink: 0;"></image>
			</slot>
		</view>
		<pb-popup ref="pbPopup" mode="bottom" contentMaxHeight="65vh" @close="cancelSelect">
			<template #header>
				<view class="pb-flex-column">
					<view class="title-btn pb-flex-row pb-main-between">
						<view class="cancel-btn" @click="cancelSelect">
							取消
						</view>
						<view class="title">
							{{title}}
						</view>
						<view class="confirm-btn" @click="confirmSelect">
							确定
						</view>
					</view>
					<view class="pb-flex-column add-btn">
						<text @click="handleAdd">添加就诊人</text>
					</view>
				</view>
				
			</template>
			<view class="patient-switch">
				<view class="patient-wrap">
					<view class="patient-list">
						<view v-for="(item,index) in patientList" :key="item[uniqueKey]"
							class="patient-item pb-flex-row pb-cross-center pb-main-between"
							:class="{'selected': item[uniqueKey] == activeKey}" @click="patientClick(item)">
							<view>
								<view class="text-content" style="font-weight: bold;">
									{{ item[nameKey] }}
								</view>
								<view class="text-label">
									{{ item[relationKey] || ''}}｜{{ item[cardTypeKey] || '' }}｜{{ item[cardNoKey].replace(/(\w{4})\w*(\w{3})/,'$1***$2') }}
								</view>
							</view>
							<u-icon v-if="item[uniqueKey] == activeKey" name="checkmark" bold size="40rpx" color="#48B5EF"></u-icon>
						</view>
					</view>
				</view>
			</view>
		</pb-popup>
	</view>
</template>

<script>
	export default {
		name:"pb-patient-switch-popup",
		props: {
			uniqueKey: {
				type: String,
				default: "id"
			},
			uniqueValue: {
				type: [String,Number],
			},
			nameKey: {
				type: String,
				default: "name"
			},
			relationKey: {
				type: String,
				default: "relation"
			},
			cardTypeKey: {
				type: String,
				default: "card_type_name"
			},
			cardNoKey: {
				type: String,
				default: "card_no"
			},
			hiddenView: {
				type: Boolean,
				default: false
			},
			title: {
				type: String,
				default: "选择就诊人"
			},
			readOnly: {
				type: Boolean,
				default: false
			}
			
		},
		data() {
			return {
				activeKey: null,
				selectPatientTemp: null,
				selectPatient: null
			};
		},
		watch: {
			uniqueValue: {
				handler(newValue,oldValue) {
					if (newValue) {
						if (this.patientList && this.patientList.length > 0) {
							let patient = this.patientList.find(item => item[this.uniqueKey] == newValue)
							if (patient) {
								this.selectPatient = patient
								this.activeKey = newValue
							}
						}
					} else {
						this.selectPatient = this.defaultPatient || null
						this.activeKey = this.defaultPatient ? this.defaultPatient[this.uniqueKey] : null
					}
					this.selectPatientTemp = this.selectPatient
				},
				immediate:true
			}
		},
		computed: {
			showName() {
				let name = '暂无可选择的就诊人，请添加'
				let card = ''
				if (this.selectPatient && this.selectPatient[this.nameKey]) {
					name = this.selectPatient[this.nameKey]
					card = this.selectPatient[this.cardNoKey]
				} else if (this.defaultPatient && this.defaultPatient[this.nameKey]) {
					name = this.defaultPatient[this.nameKey]
					card = this.defaultPatient[this.cardNoKey]
				}
				if (card) {
					card = card.replace(/(\w{4})\w*(\w{3})/, '$1********$2')
					card = '（卡号：' + card + '）'
				}
				return name + card
			},
			patientList() {
				return this.$store.getters.patientList
			},
			defaultPatient() {
				this.$store.dispatch('user/getDefaultPatient')
				return this.$store.getters.defaultPatient
			}
		},
		methods: {
			onClick() {
				if (this.readOnly == false) {
					if (this.selectPatient) {
						this.$refs.pbPopup.show = true
					} else {
						this.handleAdd()
					}
				}
			},
			patientClick(item) {
				this.activeKey = item[this.uniqueKey]
				this.selectPatientTemp = item
			},
			cancelSelect() {
				this.activeKey = this.selectPatient[this.uniqueKey]
				this.$refs.pbPopup.show = false
				this.$emit('close')
			},
			confirmSelect() {
				if (this.selectPatient[this.uniqueKey] != this.selectPatientTemp[this.uniqueKey]) {
					this.selectPatient = this.selectPatientTemp
					this.$emit('confirm', this.selectPatient)
					console.log('【switch-patient-view】confirmSelect=>' + JSON.stringify(this.selectPatient))
				}else {
					this.$emit('close')
				}
				this.$refs.pbPopup.show = false
			},
			handleAdd() {
				this.$emit('handleAdd')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 30rpx;
		background-color: white;
	
		image {
			width: 48rpx;
			height: 48rpx;
		}
	
		text {
			font-size: 32rpx;
			font-weight: 500;
			color: #222222;
			padding-left: 8rpx;
		}
	}
	
	.title-btn {
		padding: 30rpx 32rpx;
		font-size: 32rpx;
		font-weight: 600;
		border-bottom: 1rpx solid #E5E6EB;
		
		.cancel-btn {
			color: #4D5566;
		}
		
		.title {
			font-size: 32rpx;
			font-weight: 600;
			color: #1F2228;
		}
		
		.confirm-btn {
			color: $uni-color-primary;
		}
	}
	
	.add-btn {
		margin: 30rpx;
		padding: 20rpx;
		text-align: center;
		font-size: 32rpx;
		border-radius: 8rpx;
		background-color: #F7F8FA;
		color: $uni-color-primary;
	}
	
	.patient-switch {
		.patient-wrap {
			max-height: 100%;
			overflow: auto;
		}
	
		.patient-list {
			padding: 0 32rpx 32rpx 32rpx;
	
			.patient-item {
				margin-top: 32rpx;
				padding: 20rpx 32rpx;
				border-radius: 8rpx;
				background-color: #F7F8FA;
	
			}
	
			.selected {
				border: 1rpx solid $uni-color-primary;
				background-color: #E7F9F4;
			}
		}
	}
</style>